<template>
  <div>
    <listLayoutVue>
      <template #title>用户列表</template>
      <template #operation>
        <Form
          class="custom-ivu-form d-inline-block ml15"
          inline
          style="vertical-align: 5px"
          @submit.native.prevent="handleFormSubmit"
        >
          <FormItem style="margin-bottom: 0">
            <Input
              v-model="formData.searchWords"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
            <button class="button-empty-style ml5" type="submit">
              <Icon class="f30 pointer" type="ios-search" />
            </button>
          </FormItem>
        </Form>
        <span class="mr15">共有用户{{ pagination.total }}个</span>
      </template>

      <template #table>
        <CommonTablePage
          class="mt20 user-manage--table"
          :loading="tableLoading"
          :columns="columns"
          :tableData="tableData"
          :total="pagination.total"
          @on-selection-change="(s) => (selection = s)"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

    <ModaEditUser
      :visible.sync="visible.edit"
      :edit-item="currentEditItem"
      @on-add-success="handleFormSubmit"
    ></ModaEditUser>
  </div>
</template>

<script>
// components
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModaEditUser from '../components/ModaEditUser.vue'

//util
import { createCommonPagination } from '@/utils/service.js'
import { handleRequestStatus } from '@/utils/uitls'
import { createColumns, createForm } from '../service'

import mixin from '../mixin'
export default {
  name: 'ManageUser',

  mixins: [mixin],

  components: { ModaEditUser, listLayoutVue, CommonTablePage },

  data() {
    return {
      formData: createForm('1'),

      tableLoading: false,
      columns: createColumns(this, 'ManageUser'),
      selection: [],
      tableData: [],
      pagination: createCommonPagination(),

      currentEditItem: {},

      visible: {
        create: false,
        edit: false,
      },
    }
  },

  computed: {
    batchBtnDisabled() {
      return this.selection.length === 0
    },
  },

  methods: {
    handleResetPwd() {
      if (this.batchBtnDisabled) return
      let requestCount = 0
      for (let i = 0, len = this.selection.length; i < len; i++) {
        const { userId, defaultPassword, userName } = this.selection[i]
        this.systemUserResetPassword({ userId, defaultPassword }).then((res) => {
          requestCount++
          if (res.data.status !== 0) {
            this.$Message.error('用户' + userName + res.data.message)
          } else if (requestCount === len) {
            this.$Message.success(res.data.message)
            this.handleFormSubmit()
          }
        })
      }
    },

    handleFormSubmit() {
      this.getSystemUserCount({ ...this.formData })
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit()
    },

    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit()
    },

    handleTableRowEdit(row) {
      this.currentEditItem = row
      this.visible.edit = true
    },

    handleTableRowResetPwd(row) {
      const { userId, defaultPassword } = row
      this.systemUserResetPassword({ userId, defaultPassword }).then((res) => {
        handleRequestStatus(res, '重置密码', this.handleFormSubmit)
      })
    },
  },

  mounted() {
    // await this.getSystemRoleList()
    this.handleFormSubmit()
  },
}
</script>

<style lang='less' scoped></style>
